<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%pageContext.setAttribute("path", request.getContextPath()); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>回收站管理</title>

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
		<div class="container">
	    <div class="row clearfix">
		<div class="col-md-12 column">
			<h3 class="text-center">
				回收站管理中心
			</h3>
		</div>
	</div>
</div>

<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			 <button type="button" class="btn btn-link btn-lg" onClick="location.href='WorkstationAdd.jsp'">新增回收站</button>
			 
			
		</div>
	</div>
</div>

<form action="">
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>
							编号
						</th>
						<th>
							名称
						</th>
						<th>
							地区
						</th>
						<th>
							位置
						</th>
						</th>
						<th>
							操作
						</th>
					</tr>
					
					<c:choose>
					<c:when test="${not empty stations }">
				<c:forEach items="${stations}" var="station" >
				
		     	<tr>
					<td>${station.wid}</td>
					<td>${station.wname }</td>
					<td>${station.waddress} </td>
					<td>${station.wdesc} </td>
					<td>
					
						 <button type="button"  onclick="amend(this)">修改</button>
						 <button type="button" onclick="drop(this)">删除</button>

		            </td>
					
			</tr> 
			</c:forEach>
			</c:when>
			<c:otherwise>
			没有数据
			</c:otherwise>
				</c:choose>
			</table>
		</div>
	</div>
</div>
<%-- "${path }/ --%>
</form>
	<script type="text/javascript" src="${path }/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">	
	//修改
	function amend(object){
		var tr = $(object).parent().parent();
		for(var i=1;i<=4;i++){
			tr.children().eq(i).html("<input type='text' value="+tr.children().eq(i).text()+"/>");
			if(i==4){
				tr.children().eq(i).html("<input type='button' onclick='confirm(this);' value='确认修改'>");
			}
		}
	}

	function confirm(object){
		var tr = $(object).parent().parent();
		var id = tr.children().eq(0).html();
		var name = tr.children().eq(1).children().val();
		var address = tr.children().eq(2).children().val();
		var desc = tr.children().eq(3).children().val();
		
		$.ajax({
			url:"WorkstationUpdate",
			data:{
				wid:id,
				wname:name,
				waddress:address,				
				wdesc:desc
			},
			type:"post",
			dataType:"json",
			success:function(data){
				tr.children().eq(1).html(name);
				tr.children().eq(2).html(address);
				tr.children().eq(3).html(desc);
				tr.children().eq(4).html("<button type='button' onclick='amend(this);'>修改</button><button type='button' onclick='drop(this);'>删除</button>");
			}
		});
	}
	//删除
	function drop(object){
		var tr = $(object).parent().parent();
		var id = tr.children().eq(0).html();
		$.ajax({
			url:'WorkstationDelete',
			data:{
				wid:id
			},
			type:"post",
			dataType:"json",
			success:function(data){
				if(data==1){
					tr.remove();
				}
			}
		});
	}
	
	
	</script>
</body>
</html>
